
<template>
  <div class="card-title" ref="notesRef">
    <div class="card-title_title">
      <span>
        <span class="iconfont icon-biji"></span>
        随记精选
      </span>
      <i></i>
    </div>
    <ul class="notes_list">
      <li v-for="(item,index) in notes" :key="index">
        <span class="iconfont icon-shoucang_shoucang"></span>
        <span class="notetitle">{{ item.title }}</span>
        <div class="notes_list--icons">
          <span><i class="iconfont icon-time"></i>{{ item.createTime }}</span>
          <span><i class="iconfont icon-tuijian2"></i>{{ item.like }}</span>
          <span><i class="iconfont icon-chakan"></i>{{ item.view }}</span>
        </div>
      </li>
    </ul>
  </div>
</template>
<script setup lang="ts">
import { getNoteList } from "../service/api/note"
//随记数据
const notes = ref()
//分页数据
let pages = reactive({
  pageNo:1,
  pageSize:5
})
//获取随记列表
const getNotes = async() => {
  await nextTick()
  try{
    const res:any = await getNoteList(pages)
    const data = res.data._value
    if(data.code == 200){
      notes.value = data.data
    }
  }catch(err){
    console.log(err)
  }
}
onMounted(() => {
  getNotes()
})
</script>
<style scoped lang="scss">
.notes{
    width: 250px;
    border-radius: 6px;
    height: auto;
    background-color: rgba(255,255,255,.9);
    padding: 10px 0 40px 0;
    &_title{
      font-size: 18px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 40px;
      padding: 0 10px 0 10px;
      position: relative;
      border-bottom: 1px dashed #333;
      i{
        content: " ";
        position: absolute;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        background: #fc625d !important;
        width: 11px;
        height: 11px;
        -webkit-box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
        box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
        float: right;
        right: 55px;
        top: 15px;
      }
    }
    &_list{
      padding: 0 10px;
      margin-top: 20px;
      li{
        font-size: 16px;
        padding: 10px 0 10px 0;
        border-bottom: 1px dashed #fdbc40;
        span{
          vertical-align: middle;
          font-size: 14px;
        }
        .notetitle{
          display: inline-block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          cursor: pointer;
          width: 90%;
        }
        .iconfont{
          color: $yun-color;
          margin-right: 4px;
        }
      }
      &--icons{
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
      }
    }
  }
</style>